<ul class="list-group">

    @foreach($topics as $topic)
        <li class="list-group-item border-0 border-bottom d-flex align-items-center">

            <a href="{{route('users.show',$topic->user_id)}}">
                <img src="{{$topic->user->avatar}}" alt="avatar" width="50" class="img-thumbnail flex-shrink-0">
            </a>

            <div class="d-flex flex-column px-2 flex-grow-1">

                <a href="{{route('topics.show',[$topic->id,$topic->slug])}}" class="text-success text-decoration-none">{{$topic->title}}</a>

                <div>
                    <a href="{{route('categories.show',$topic->category_id)}}" class="text-muted text-decoration-none">
                        <i class="fa-regular fa-folder-closed"></i>
                        {{$topic->category->name}}
                    </a>
                    <span>  •   </span>
                    <a href="{{route('users.show',$topic->user_id)}}" class="text-muted text-decoration-none">
                        <i class="fa-regular fa-user"></i>
                        {{$topic->user->name}}
                    </a>
                    <span>  •   </span>
                    <span class="text-muted">
                         <i class="fa-regular fa-clock"></i>
                        {{$topic->created_at->diffForHumans()}}
                    </span>
                </div>

            </div>

            <a href="#" class="text-decoration-none badge text-bg-{{$topic->reply_count > 0 ? 'danger' : 'secondary'}}">
                {{$topic->reply_count}}
            </a>

        </li>
    @endforeach

</ul>

<div class="mt-3">
    {{$topics->links()}}
</div>
